<template>
  <div class="app-container">
    <mainTilte title="添加商品" />
    <el-form ref="searchParams" :inline="true" :model="searchParams" label-width="110px">
      <div class="filters-wrap clearfix">
        <div class="filters-area">
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-select v-model.trim="searchParams.searchType" clearable placeholder="编码或名称或采购员">
                <el-option v-for="(item, index) of issignContract" :key="index" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-input v-model.trim="searchParams.searchName" placeholder="关键字回车搜索" @keyup.enter.native="query" />
            </el-form-item>
          </el-col>
          <el-button type="primary" icon="el-icon-search" @click="query">搜索</el-button>
        </div>
      </div>
    </el-form>
    <div v-loading="loading">
      <egrid class="egrid" stripe fit border highlight-current-row element-loading-text="正在努力加载中..." :column-type="['selection']" :data="tableData" :columns="columns" :columns-schema="columnsSchema" :columns-handler="columnsHandler" @selection-change="checkChildIds" />
      <epagination v-if="tableData" :total="total" :current="searchParams.page" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
    </div>

  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import dicValues from '@/components/dicTransform/index'
import appText from '@/components/appText/index'
export default {
  mixins: [list],
  props: {
    isPurchase: {
      type: Boolean,
      default: false
    },
    addGlProduct: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    const DICTIONARIES = {
      auditStatus: [
        // 商品所属客户类型 0-内部员工 1-客户商品
        {
          code: 0,
          name: '内部员工'
        },
        {
          code: 1,
          name: '客户商品'
        }
      ],
      // 运营类型：1-代营 2-自营
      cooperationStatus: [
        {
          code: 1,
          name: '代营'
        },
        {
          code: 2,
          name: '自营'
        }
      ],
      // 包装方式 ：1-普通商品 2-多箱包装
      splitOrder: [
        {
          code: 1,
          name: '普通商品'
        },
        {
          code: 2,
          name: '多箱包装'
        }
      ],
      statusList: [
        // 审核状态 0-待提交 1-待采购员审核 2-待运营审核 3-运营审核通过     -1 采购员审核驳回 -2 运营员审核驳回
        {
          code: 0,
          name: '待审核'
        },
        {
          code: 1,
          name: '审核通过'
        },
        {
          code: 2,
          name: '审核驳回'
        },
        {
          code: 3,
          name: '待编辑'
        },
        {
          code: 4,
          name: '待提交'
        }
      ],
      // 状态 2-禁用 1-启用
      isableList: [
        {
          code: 1,
          name: '启用'
        },
        {
          code: 2,
          name: '禁用'
        }
      ]
    }
    return {
      title: '',
      loadingText: '',
      loading: false,
      searchForm: {},
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 50, // 默认是10
        totalRows: 0,
        searchType: '',
        searchName: ''
      },
      issignContract: [
        {
          name: '编码',
          code: 'code'
        },
        {
          name: '名称',
          code: 'name'
        },
        {
          name: '采购员',
          code: 'purchase_name'
        }
      ],
      value: '',
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '缩略图',
          prop: 'image_url',
          width: '120',
          align: 'center',
          tooltip: false
        },
        {
          label: '系统sku',
          prop: 'code',
          width: '250',
          align: 'center',
          tooltip: false
        },
        {
          label: '中文名称',
          prop: 'name_ch',
          width: '100',
          align: 'center',
          tooltip: false
        },

        {
          label: '商品分类',
          prop: 'category_text',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '英文名称',
          prop: 'name_en',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '包装方式',
          prop: 'packing_method',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '运营类型',
          prop: 'operate_type',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '采购员',
          prop: 'purchase_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '产品条码UPC',
          prop: 'bar_code_upc',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '产品条码',
          prop: 'bar_code',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '计量单位',
          prop: 'unit',
          width: '100',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '所属供应商',
        //   prop: 'supplier_name',
        //   width: '180',
        //   align: 'center',
        //   tooltip: false
        // },
        {
          label: '所属客户',
          prop: 'company_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '审核状态',
          prop: 'status',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '状态',
          prop: 'status',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'creator_name',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '174',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'update_name',
          width: '112',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '174',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {
        缩略图: {
          propsHandler({ col, row }) {
            return {
              img: row.image_url
            }
          },
          component: thund
        },
        包装方式: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['splitOrder'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        运营类型: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['cooperationStatus'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        审核状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['statusList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['isableList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      },
      unitList: []
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.getUnitList() // 获取计量单位列表
  },
  methods: {
    getUnitList() {
      const vm = this
      vm.$cache.getDic('unit').then(res => {
        vm.unitList = res
        vm.query()
      })
    },
    // 自定义操作栏
    columnsHandler(cols) {
      if (this.isPurchase) {
        const col = {
          label: '币别',
          fixed: 'left',
          width: '80',
          align: 'center',
          tooltip: false,
          component: appText,
          propsHandler({ row }) {
            return { text: row.currencyType }
          }
        }
        return cols.concat(col)
      } else {
        return cols
      }
      //   return cols
    },
    checkChildIds(val) {
      this.$emit('checkChildIds', val)
    },
    query() {
      const vm = this
      let url = ''
      if (vm.searchParams.searchType === 'name') {
        if (/[\u4E00-\u9FA5]/g.test(vm.searchParams.searchName)) {
          console.log(1)
          url = `/product?page=${vm.searchParams.page}&limit=${vm.searchParams.limit}&name_ch=${vm.searchParams.searchName}&status=1&is_disable=1&packing_method=1`
        } else {
          console.log(2)
          url = `/product?page=${vm.searchParams.page}&limit=${vm.searchParams.limit}&name_en=${vm.searchParams.searchName}&status=1&is_disable=1&packing_method=1`
        }
      } else {
        url = `/product?page=${vm.searchParams.page}&limit=${vm.searchParams.limit}&${vm.searchParams.searchType}=${vm.searchParams.searchName}&status=1&is_disable=1${this.addGlProduct ? '' : '&packing_method=1'}`
      }
      const getCurrencyType = (rmb, usd) => {
        rmb = +rmb
        usd = +usd
        return rmb === 0 ? 'USD' : 'RMB'
      }
      if (vm.isPurchase) {
        url += '&type=0'
      }
      vm.initTableData(url, null, (data) => {
        vm.data = data.map(e => {
          const item = vm.unitList.find(unit => `${unit.id}` === e.unit)
          e.unit = item ? item.dict_data_name : e.unit
          if (vm.isPurchase) {
            e['currencyType'] = getCurrencyType(e.purchase_price_rmb, e.purchase_price_usd)
          }
          e.supplier_name = e.supplier_names || e.supplier_name
          return e
        })
      })
    },
    handleSizeChange(val) {
      const vm = this
      vm.searchParams.limit = val
      vm.query()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    }
  }
}
</script>

<style>
</style>
